<template>
  <div class="popup" @touchmove.stop.prevent>
    <div
      class="overlay"
      @click="clickOverlay"
      :style="[showOverlay, { transition: duration + 's' }]"
    ></div>
    <div
      class="panel"
      :style="[
        panelStyle,
        showPopup,
        {
          transform,
          transition: duration + 's',
        },
      ]"
    >
      <div class="brief" v-if="brief">{{brief}}</div>
      <div class="actions">
        <div class="item" v-for="(item, index) in actions" :key="index" @click="handleSelect(item)">
          {{item.name}}
        </div>
      </div>
      <div class="cancel" @click="handleCancel">取消</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Popup",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    actions: Array,
    // 面板样式
    styles: Object,
    // 动画时长，单位秒
    duration: {
      type: Number,
      default: 0.3,
    },
    // 是否在点击遮罩层后关闭
    clickOverlayClose: {
      type: Boolean,
      default: true,
    },
    brief: String
  },
  computed: {
    panelStyle() {
      return Object.assign(
        {
          height: "300px",
          background: "#fff",
        },
        this.styles
      );
    },
  },
  watch: {
    value(show) {
      let { panelStyle } = this;
      let { height } = panelStyle;
      this.transform = `translateY(${height})`;

      if (show) {
        this.openPopup();
      } else {
        this.closePopup();
      }
    },
  },
  data() {
    return {
      showOverlay: {
        display: "none",
        opacity: 0,
      },
      showPopup: {
        opacity: 0,
        display: "none",
      },
      transform: "",
    };
  },
  methods: {
    // 打开弹窗
    openPopup() {
      this.showPopup = {};
      this.showOverlay = { opacity: 0 };

      setTimeout(() => {
        this.transform = `translateY(0)`;
        this.$set(this.showOverlay, "opacity", 1);
        this.opened();
      }, 5);

      setTimeout(() => {
        this.showPopup = { opacity: 1, display: "block" };
      }, 100);
    },
    // 关闭弹窗
    closePopup() {
      this.$set(this.showOverlay, "opacity", 0);

      setTimeout(() => {
        this.$set(this.showPopup, "display", "none");
        this.$set(this.showOverlay, "display", "none");
      }, this.duration * 1000);
    },
    // 打开弹出层且动画结束后触发
    opened() {
      setTimeout(() => {
        this.$emit("opened");
      }, this.duration * 1000);
    },
    // 点击遮罩层时触发
    clickOverlay() {
      if (this.clickOverlayClose) {
        this.$emit("clickOverlay");
        this.$emit("input", false);
        this.close();
      }
    },
    handleCancel() {
      this.$emit("handleCancel");
      this.$emit("input", false);
      this.close();
    },
    // 关闭弹出层时触发
    close() {
      this.$emit("close");
      this.closed();
    },
    // 关闭弹出层且动画结束后触发
    closed() {
      setTimeout(() => {
        this.$emit("closed");
      }, this.duration * 1000);
    },
    handleSelect(item) {
      this.$emit('select', item);
      this.$emit("input", false);
      this.close();
    }
  },
};
</script>

<style lang="scss" scoped>
$radius: 12px;

.popup {
  .overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }

  .panel {
    width: 100%;
    position: fixed;
    z-index: 9001;
    bottom: 0;
    border-radius: $radius $radius 0 0;

    .brief {
      text-align: center;
      color: #969799;
      font-size: 14px;
      padding: 10px 0;
      border-bottom: 1px solid #f5f5f5;
    }

    .actions {
      
      .item {
        height: 45px;
        line-height: 45px;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
        border-bottom: 1px solid #f5f5f5;
      }
    }

    .cancel {
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      color: #666;
      font-size: 14px;
      background: #fff;
      border-top: 8px solid #f7f8fa;
    }
  }
}
</style>